<template>
	<view class="container">
		<view class="header">
			<view class="search">
				<u-search placeholder="请输入产品" v-model="keyword" :showAction="false" bgColor="#f7f8fa"
					@search="OnRefresh"></u-search>
			</view>
		</view>

		<scroll-view v-if="ProductList.length > 0" class="list" :scroll-y="true" :scroll-top="top"
			:refresher-triggered="Triggered" :refresher-enabled="true" :lower-threshold="100"
			@refresherrefresh="OnRefresh" @scrolltolower="OnBottom" @scroll="OnScroll"
			:style="{ height: `${height}px` }">
			<navigator :url="`/pages/validate/info?code=${item.query_code}`" class="item" v-for="(item, key) in ProductList"
				:key="key">
				<view class="title">{{ item.products.name }}</view>

				<view class="line"></view>

				<view class="son-list">
					<view class="son-item">
						<view class="name"> 查询次数： </view>
						<view class="value">{{ item.query_num }}</view>
					</view>

					<view class="son-item">
						<view class="name"> 您查询的防伪码： </view>
						<view class="value">{{ item.query_code }}</view>
					</view>

					<view class="son-item">
						<view class="name"> 首次查询时间： </view>
						<view class="value">{{ item.query_time_text }}</view>
					</view>

					<view class="son-item">
						<view class="name"> 小程序码： </view>
						<view class="value">
							<image src="/static/images/code.png" />
						</view>
					</view>
				</view>
			</navigator>

			<u-loadmore :status="status" marginBottom="40" fontSize="20" lineColor="#1CD29B" dashed line />
		</scroll-view>

		<!-- 提醒组件 -->
		<u-toast ref="uToast"></u-toast>

		<!-- 返回顶部 -->
		<u-back-top :scroll-top="top" @click="BackTop"></u-back-top>
	</view>
</template>
<script>
	export default
	{
		data()
		{
			return {
				Triggered: false, // 下拉刷新状态
				Isfreshing: false, //防止重复刷新
				ProductList: [],
				page: 1, // 页码
				business:{},
				status: "loadmore",
				keyword: "",
				height: 0, //页面高度
				top: 0,
			};
		},
		onShow()
		{
			//获取本地存储
			var business = uni.getStorageSync("business") ? uni.getStorageSync("business") : {};
			// 判断对象是否为空
			if (Object.getOwnPropertyNames(business).length > 0)
			{
				this.business = business;
				this.OnRefresh();
			}
			else
			{
				//没有登录
				uni.$u.route({
					type: 'reLaunch',
					url: 'pages/validate/validate'
				})
				return false;
			}
		},
		onReady()
		{
			//调用uni接口 获取页面的高度
			uni.getSystemInfo(
			{
				success: res =>
				{
					this.height = res.windowHeight;
				},
			});
		},
		methods:
		{
			BackTop()
			{
				//返回顶部
				this.top = 0;
			},
			OnScroll(e)
			{
				this.top = e.detail.scrollTop;
			},
			OnRefresh()
			{
				//下拉刷新
				//防止重复下拉刷新
				if (this.Isfreshing) return;

				//执行一次下拉刷新
				this.Isfreshing = true;

				//判断是否处于下拉刷新中
				if (!this.Triggered) this.Triggered = true; //正在下拉刷新中

				this.page = 1;
				this.ProductList = [];

				//请求数据
				this.ProductData();
			},
			OnBottom()
			{
				//上拉加载
				this.ProductData();
			},
			async ProductData()
			{
				//请求中
				let result = await this.$u.api.ProductIndex(
				{
					busid: this.business.id,
					page: this.page,
					keyword: this.keyword
				});

				if (this.Triggered) this.Triggered = false;
				if (this.Isfreshing) this.Isfreshing = false;
				this.status = "loadmore";

				if (result.code == 0)
				{
					//没有更多数据
					this.status = "nomore";
					return false;
				}

				this.ProductList = this.ProductList.concat(result.data);
				this.page++;
			},
		},
	};
</script>

<style>
	page
	{
		background-color: #eee;
	}

	.container
	{
		width: 95%;
		margin: 0 auto;
		padding-bottom: 20px;
	}

	.header
	{
		background-color: #fff;
		padding: 10px 0;
		margin-top: 10px;
		border-radius: 10px;
	}

	.header .search
	{
		width: 95%;
		margin: 0 auto;
	}

	.item
	{
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
		margin-top: 10px;
		padding: 0 10px 10px;
	}

	.item .title
	{
		padding: 10px 0 10px 10px;
		font-size: 20px;
	}

	.item .line
	{
		width: 100%;
		height: 1px;
		background: #ebebeb;
		margin: 0 auto;
		margin-bottom: 10px;
	}

	.item .son-list .son-item
	{
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.item .son-list .son-item .name
	{
		color: #9b9b9a;
	}

	.item .son-list .son-item image
	{
		width: 30px;
		height: 30px;
	}
</style>